<template>
  <div class="salon_diagnose_4">
    <div class="diagnose_4_table">
      <el-alert :title="'请先完成顾客复盘，确保标签完整'" type="warning" :closable="false" show-icon></el-alert>
      <table border="0" cellpadding="5">
        <tr>
          <th>客户池总量</th>
          <td colspan="4">
            <el-input
              v-model="stockVo.clerkTotal"
              type="number"
              :step="1"
              :min="0"
              size="small"
              style="width: 180px"></el-input>
          </td>
        </tr>
        <tr>
          <th>客群年龄(%)</th>
          <td>
            <span class="in_td_title">20-30岁</span>
            <el-input
              v-model="stockVo.clerkAgePct20"
              type="number"
              :step="0.01"
              :min="0"
              :max="100"
              :precision="2"
              size="small"
              style="width: 87px"></el-input>
          </td>
          <td>
            <span class="in_td_title">30-40岁</span>
            <el-input
              v-model="stockVo.clerkAgePct30"
              type="number"
              :step="0.01"
              :min="0"
              :max="100"
              :precision="2"
              size="small"
              style="width: 87px"></el-input>
          </td>
          <td>
            <span class="in_td_title">40-50岁</span>
            <el-input
              v-model="stockVo.clerkAgePct40"
              type="number"
              :step="0.01"
              :min="0"
              :max="100"
              :precision="2"
              size="small"
              style="width: 87px"></el-input>
          </td>
          <td>
            <span class="in_td_title">50岁以上</span>
            <el-input
              v-model="stockVo.clerkAgePct50"
              type="number"
              :step="0.01"
              :min="0"
              :max="100"
              :precision="2"
              size="small"
              style="width: 87px"></el-input>
          </td>
        </tr>
        <tr>
          <th>活跃（直客）总量</th>
          <td>
            <span class="in_td_title">S客</span>
            <el-input
              v-model="stockVo.clerkActPctS"
              type="number"
              :step="1"
              :min="0"
              :max="stockVo.clerkTotal"
              size="small"
              style="width: 102px"></el-input>
          </td>
          <td>
            <span class="in_td_title">A客</span>
            <el-input
              v-model="stockVo.clerkActPctA"
              type="number"
              :step="1"
              :min="0"
              :max="stockVo.clerkTotal"
              size="small"
              style="width: 102px"></el-input>
          </td>
          <td>
            <span class="in_td_title">B客</span>
            <el-input
              v-model="stockVo.clerkActPctB"
              type="number"
              :step="1"
              :min="0"
              :max="stockVo.clerkTotal"
              size="small"
              style="width: 102px"></el-input>
          </td>
          <td>
            <span class="in_td_title">C客</span>
            <el-input
              v-model="stockVo.clerkActPctC"
              type="number"
              :step="1"
              :min="0"
              :max="stockVo.clerkTotal"
              size="small"
              style="width: 102px"></el-input>
          </td>
        </tr>
        <tr>
          <th>活跃（渠道客）总量</th>
          <td>
            <span class="in_td_title">S客</span>
            <el-input
              v-model="stockVo.clerkActPlatPctS"
              type="number"
              :step="1"
              :min="0"
              :max="stockVo.clerkTotal"
              size="small"
              style="width: 102px"></el-input>
          </td>
          <td>
            <span class="in_td_title">A客</span>
            <el-input
              v-model="stockVo.clerkActPlatPctA"
              type="number"
              :step="1"
              :min="0"
              :max="stockVo.clerkTotal"
              size="small"
              style="width: 102px"></el-input>
          </td>
          <td>
            <span class="in_td_title">B客</span>
            <el-input
              v-model="stockVo.clerkActPlatPctB"
              type="number"
              :step="1"
              :min="0"
              :max="stockVo.clerkTotal"
              size="small"
              style="width: 102px"></el-input>
          </td>
          <td>
            <span class="in_td_title">C客</span>
            <el-input
              v-model="stockVo.clerkActPlatPctC"
              type="number"
              :step="1"
              :min="0"
              :max="stockVo.clerkTotal"
              size="small"
              style="width: 102px"></el-input>
          </td>
        </tr>
        <tr>
          <th>近1年最大消费金额</th>
          <td colspan="4">
            <el-input
              v-model="stockVo.volumeOfBusiness"
              type="number"
              :step="1"
              :min="0"
              :max="9999999999.99"
              :precision="2"
              size="small"
              style="width: 180px"></el-input>
          </td>
        </tr>
        <tr>
          <th>运营较长的活客群</th>
          <td>
            <span class="in_td_title">平均数量</span>
            <el-input
              v-model="stockVo.clerkActLongSumNum"
              type="number"
              :step="1"
              :min="0"
              :max="stockVo.clerkTotal"
              size="small"
              style="width: 102px"></el-input>
          </td>
          <td>
            <span class="in_td_title">平均时长(天)</span>
            <el-input
              v-model="stockVo.clerkActLongAvgDay"
              type="number"
              :step="1"
              :min="0"
              size="small"
              style="width: 87px"></el-input>
          </td>
          <td colspan="2">
            <span class="in_td_title">平均客单价</span>
            <el-input
              v-model="stockVo.clerkActLongAvgDeal"
              type="number"
              :step="1"
              :min="0"
              :max="9999999999.99"
              :precision="2"
              size="small"
              style="width: 180px"></el-input>
          </td>
        </tr>
        <tr>
          <th style="border: none"></th>
          <td colspan="4" style="border: none">
            <el-button v-if="isUpdating" type="primary" size="medium" disabled icon="el-icon-loading" style="width: 120px">
              保存
            </el-button>
            <el-button v-else type="primary" size="medium" style="width: 120px" @click.stop="updateStockDiagnose">保存</el-button>
          </td>
        </tr>
      </table>
    </div>

    <div class="diagnose_4_pct">
      <div class="sch_title">
        <div v-if="searchTag.allClerk">全部顾客</div>
        <el-switch v-model="searchTag.allClerk"></el-switch>
        <div v-if="!searchTag.allClerk">注册晚于</div>
        <el-date-picker
          v-model="searchTag.minDate"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          size="small"
          :disabled="searchTag.allClerk"
          :picker-options="{ disabledDate: tagDisabledDate }"
          style="width: 180px"></el-date-picker>
        <el-button v-if="isUpdating" type="primary" size="small" disabled icon="el-icon-loading" style="width: 80px">
          搜索
        </el-button>
        <el-button v-else type="primary" size="small" style="width: 80px" @click.stop="loadTagsPct">搜索</el-button>
      </div>
      <div class="data_pct_hd">
        <div class="data_pct_item">
          <div class="tag_pct">
            <div>
              <div class="tag_p_name">全部顾客</div>
              <div class="tag_p_value">{{ tagsPct.count_clerk }}</div>
            </div>
            <div>
              <div class="tag_p_name">重点顾客(占比):</div>
              <div class="tag_p_value">{{ tagsPct.noble_2 }}</div>
            </div>
          </div>
          <div class="tag_pct">
            <div>
              <div class="tag_p_name">S级</div>
              <div class="tag_p_value">
                {{ tagsPct.grade_4 }}
              </div>
            </div>
            <div>
              <div class="tag_p_name">C级</div>
              <div class="tag_p_value">
                {{ tagsPct.grade_1 }}
              </div>
            </div>
            <div>
              <div class="tag_p_name">B级</div>
              <div class="tag_p_value">
                {{ tagsPct.grade_2 }}
              </div>
            </div>
            <div>
              <div class="tag_p_name">A级</div>
              <div class="tag_p_value">
                {{ tagsPct.grade_3 }}
              </div>
            </div>
            <div>
              <div class="tag_p_name">未定级</div>
              <div class="tag_p_value">
                {{ tagsPct.grade_0 }}
              </div>
            </div>
          </div>
        </div>
        <div class="data_pct_item">
          <div style="color: #724eff">消费能力标签(占比)</div>
          <div class="tag_pct">
            <div style="color: #666">超有钱：{{ tagsPct.bg2_0 }}</div>
            <div style="color: #666">有钱：{{ tagsPct.bg2_1 }}</div>
            <div style="color: #666">普通：{{ tagsPct.bg2_2 }}</div>
            <div style="color: #666">没钱：{{ tagsPct.bg2_3 }}</div>
          </div>
        </div>
        <div class="data_pct_item">
          <div style="color: #3a974c">信任标签(占比)</div>
          <div class="tag_pct">
            <div style="color: #666">未破冰：{{ tagsPct.trust2_1 }}</div>
            <div style="color: #666">已破冰：{{ tagsPct.trust2_2 }}</div>
            <div style="color: #666">已信任：{{ tagsPct.trust2_3 }}</div>
          </div>
        </div>
        <div class="data_pct_item">
          <div style="color: #f29339">状态标签(占比)</div>
          <div class="tag_pct">
            <div style="color: #666">正常：{{ tagsPct.dengji_0 }}</div>
            <div style="color: #666">预警：{{ tagsPct.dengji_1 }}</div>
            <div style="color: #666">失速：{{ tagsPct.dengji_2 }}</div>
            <div style="color: #666">放弃：{{ tagsPct.dengji_3 }}</div>
          </div>
        </div>
        <div class="data_pct_item">
          <div style="color: #f197ea">升单品类(占比)</div>
          <div class="tag_pct">
            <div style="color: #666">放松（生美）：{{ tagsPct.xqwj1 }}</div>
            <div style="color: #666">肤质：{{ tagsPct.xqwj2 }}</div>
            <div style="color: #666">肤色：{{ tagsPct.xqwj3 }}</div>
            <div style="color: #666">抗衰（肤龄）：{{ tagsPct.xqwj4 }}</div>
            <div style="color: #666">塑形-面线条：{{ tagsPct.xqwj5 }}</div>
            <div style="color: #666">塑形-面体积：{{ tagsPct.xqwj6 }}</div>
            <div style="color: #666">塑形-身体：{{ tagsPct.xqwj7 }}</div>
            <div style="color: #666">单部位（鼻、眼、耳、唇、眉、颧、下巴）：{{ tagsPct.xqwj8 }}</div>
            <div style="color: #666">私密：{{ tagsPct.xqwj9 }}</div>
            <div style="color: #666">胸：{{ tagsPct.xqwj10 }}</div>
            <div style="color: #666">大健康：{{ tagsPct.xqwj11 }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getStockDiagnoseByNo, getStockDiagnoseTagsPct, saveStockDiagnoseByNo } from '@/api/diagnose';
// 引入自定义组件
import '@/utils/datefmt';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'Diagnose4',
  data() {
    return {
      salon: {},
      stockVoDefault: {
        // stockVo 的各项默认值
        clerkTotal: 0,
        clerkAgePct20: 0,
        clerkAgePct30: 0,
        clerkAgePct40: 0,
        clerkAgePct50: 0,
        clerkActPctS: 0,
        clerkActPctA: 0,
        clerkActPctB: 0,
        clerkActPctC: 0,
        clerkActPlatPctS: 0,
        clerkActPlatPctA: 0,
        clerkActPlatPctB: 0,
        clerkActPlatPctC: 0,
        volumeOfBusiness: 0,
        clerkActLongSumNum: 0,
        clerkActLongAvgDay: 0,
        clerkActLongAvgDeal: 0,
      },
      stockVo: {}, // 老客(存量客户)复盘信息
      tagsPct: {}, // 顾客标签占比
      isFetching: false, // 通用的&互斥的, 加载后端数据
      isUpdating: false,
      searchTag: {
        allClerk: true,
        minDate: undefined, // 最早注册时间
      },
    };
  },
  computed: {
    ...mapGetters(['deptId', 'openId', 'id', 'name']),
  },
  methods: {
    tagDisabledDate(date) {
      const today = new Date();
      today.setHours(0, 0, 0, 0);
      const oneYearBefore = new Date(today);
      oneYearBefore.setFullYear(today.getFullYear() - 1);
      return !(date - oneYearBefore >= 0 && date - today < 0);
    },
    loadDiagnoseData: async function (salon /* {salonId: '', salonNo: '', salonName: '', diagnoseNo: ''} */) {
      if (!salon || !salon.diagnoseNo) {
        return;
      }
      this.salon = Object.assign({}, salon);
      await this.loadDiagnose4();
      await this.loadTagsPct();
    },
    loadDiagnose4: async function () {
      if (this.isFetching) {
        return;
      }
      this.isFetching = true;
      const errAlertMsg = '查询老客复盘信息失败';
      await getStockDiagnoseByNo(this.salon.diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.stockVo = Object.assign({}, ret);
          } else {
            this.stockVo = Object.assign({}, this.stockVoDefault);
          }
        })
        .catch(err => {
          console.log('getStockDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
    loadTagsPct: async function () {
      if (this.isFetching) {
        return;
      }
      if (!this.searchTag.allClerk && !this.searchTag.minDate) {
        MessageBox.alert('请选择顾客最早注册时间');
        return;
      }
      this.isFetching = true;
      const errAlertMsg = '查询顾客标签占比失败';
      await getStockDiagnoseTagsPct(this.salon.salonId, this.searchTag.allClerk ? null : this.searchTag.minDate)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            this.tagsPct = Object.assign({}, ret);
          }
        })
        .catch(err => {
          console.log('getStockDiagnoseTagsPct', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
    updateStockDiagnose: async function () {
      if (this.isUpdating) {
        return;
      }
      this.isUpdating = true;
      const errAlertMsg = '保存老客复盘信息失败';
      saveStockDiagnoseByNo(this.salon.diagnoseNo, this.stockVo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.loadDiagnose4();
          MessageBox.alert('保存成功');
        })
        .catch(err => {
          console.log('saveStockDiagnoseByNo', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isUpdating = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/salonmodel.scss';

.salon_diagnose_4 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 40px;

  .diagnose_4_table {
    width: 65%;
    display: block;
  }

  .diagnose_4_table th {
    text-align: right;
    font-weight: 500;
    border-bottom: 1px solid #ebeef5;
    border-right: 1px solid #ebeef5;
  }
  .diagnose_4_table td {
    text-align: left;
    border-bottom: 1px solid #ebeef5;
  }

  .diagnose_4_table td .in_td_title {
    margin: 0 5px 0 0;
  }

  .diagnose_4_pct {
    display: block;
    width: 35%;
    height: 100%;
    background-color: #fff;
    padding: 0 16px 0 0;

    .sch_title {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      gap: 10px;
      padding: 0 0 5px 0;
      margin: 0 0 16px 0;
    }

    .data_pct_hd {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;

      .data_pct_item {
        width: 100%;
        height: auto;
        background: #fafafa;
        padding: 0 12px 0 12px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 10px;
      }

      .tag_pct {
        padding: 0 10px 0 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;

        .tag_p_name {
          color: #666;
          font-weight: 400;
          font-size: $sm_ctx1_font-size;
          margin-bottom: 12px;
        }

        .tag_p_value {
          color: #724eff;
          font-weight: 400;
          font-size: $sm_ctx1_font-size;
        }
      }
    }
  }
}
</style>
